<template>
	<view v-if="post">
		<uni-swiper-dot :info="strToArr(post.image)" :current="current" field="content" mode="round" :dots-styles="dotStyle">
			<swiper @change="bannerCahnge" autoplay style="height: 180px;">
				<swiper-item v-for="(item,index) in strToArr(post.image)" :key="index">
					<image :src="path+item" mode="aspectFill" style="width: 100%;height: 180px;"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="kuang" style="font-size: 16px;">
			<view style="display: flex;height: 40px;line-height: 30px;">
				<view style="width: 50%;font-weight: 700;">{{post.title}}</view>
				<view style="width: 50%;text-align: right;color: red;">{{post.salary}}</view>
			</view>
			<!-- <view style="width: 100%;display: flex;">
				<view class="label">性别要求：{{post.sexDemand}}</view>
				<view class="label">{{post.jobType}}</view>
				<view class="label">{{post.newest}}</view>
			</view> -->
			<view style="width: 100%;margin: 0px auto 0 auto;">
				<view v-for="(label,i) in strToArr(post.welfare)" :key="i" class="label">{{label}}</view>
			</view>
		</view>
<!-- 		<view class="kuang">
			<uni-section title="福利待遇" type="line" style="padding: 0;"></uni-section>
			<view style="width: 100%;margin: 10px auto 0 auto;">
				<view v-for="(label,i) in strToArr(post.welfare)" :key="i" class="label">{{label}}</view>
			</view>
		</view> -->
		<view class="kuang">
			<uni-section title="职位简介" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.content" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<!-- <view class="kuang">
			<uni-section title="薪资福利" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.weal" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="录用条件" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.employ" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view> -->
		<view class="kuang">
			<uni-section title="入职要求" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.entry" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="薪资待遇" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.daiyu" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="工作岗位" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.post" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="伙食情况" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.food" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="住宿情况" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.stay" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="到厂方式" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.reach" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view class="kuang">
			<uni-section title="企业信息" type="line" style="padding: 0;"></uni-section>
			<rich-text :nodes="post.qiye" style="font-size: 14px;line-height: 20px;"></rich-text>
		</view>
		<view style="width: 100%;height: 100px;"></view>
		<view class="position_bottom" style="display: flex;justify-content: space-between;">
			<view style="width: 48%;">
				<view @click="makePhoneCall(post.phone)" class="button"  style="background-color: #198CFF;">电话咨询</view>
			</view>
			<view style="width: 48%;">
				<view v-if="post.userNum > 0" class="button">已报名</view>
				<view @click="toApply()" v-if="post.userNum == 0" class="button">立即报名</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/request.js'
	import data from '@/static/js/util.js'
	export default {
		data() {
			return {
				path: api.getPath(),
				postId: 0,
				post: null,
				
				current: 0,
				dotStyle: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					border: '1px rgba(255,255,255,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255,255,255,0.9)',
					selectedBorder: '1px rgba(255,255,255,0.9) solid'
				},
				
				page: 0,
			}
		},
		onLoad(option) {
			this.postId = option.postId;
			this.getPostById();
		},
		onShow() {
			if(this.page > 0){
				this.getPostById();
			}
		},
		methods: {
			strToArr(str){
				return data.strToArr(str);
			},
			bannerCahnge(e){
				this.current = e.detail.current;
			},
			getPostById(){
				this.page = 0;
				let _this = this;
				let userId = 0;
				let user = uni.getStorageSync('user');
				if(user != undefined && Object.keys(user).length > 0){
					userId = user.id;
				}
				api.getPostById({
					postId: this.postId,
					userId: userId,
				}).then((res)=>{
					console.log(res);
					_this.post = res.data;
					uni.setNavigationBarTitle({
						title: _this.post.title
					});
				})
			},
			makePhoneCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			toApply(){
				this.page = 1;
				uni.navigateTo({
					url: '/pages/apply/apply?postId='+this.post.id
				})
			},
		}
	}
</script>

<style>
	.kuang{
		width: 90%;
		border-radius: 0;
		padding: 10px 5%;
	}
	.label{
		padding: 0 10px;
		background-color: #EDF0F2;
		height: 25px;
		line-height: 25px;
		border-radius: 4px;
		font-size: 12px;
		display: inline-block;
		margin-right: 10px;
	}
</style>
